<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
<!--引入的vue.js-->
<script src="/js/vue.js"></script>
<!--引入elementUI的css-->
<link  type="text/css" rel="stylesheet" href="/css/index.css">
<!--引入elementUI的js-->
<script src="/js/index.js"></script>
<!--引入axios.js-->
<script src="/js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <!--搜索功能-->
    <el-row>
        <el-col :span="4"><el-input v-model="searchForm.deptNo" placeholder="请输入部门编号"></el-input></el-col>
        <el-col :span="4"><el-input v-model="searchForm.deptName" placeholder="请输入部门名称"></el-input></el-col>
        <el-col :span="4"><el-input v-model="searchForm.loc" placeholder="请输入位置"></el-input></el-col>
        <el-col :span="4"></el-col>
        <el-col :span="4"></el-col>
        <el-col :span="4"></el-col>
    </el-row>
    <!--数据列表-->
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="deptNo"
                    label="部门编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="deptName"
                    label="部门名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="loc"
                    label="部门位置">
            </el-table-column>
        </el-table>

</div>
<script>
    //编写js代码
    new Vue({
        el:"#app",//让我们的vue对象和上边的div进行绑定
        data() {
            return {
                tableData: [],
                searchForm:{},//搜索form对象

            }
        },created(){//页面初始化
            let _this=this;
            // 向给定ID的用户发起请求
            axios.post('/dept/queryByPage',{
                "pageNo": 1,
                "pageSize": 300,
                "data": {}
            })
                .then(function (response) {
                    // 处理成功情况
                    console.log(response);
                    if(response.data.code==200){
                        _this.tableData=response.data.data.list
                    }
                })
                .catch(function (error) {
                    // 处理错误情况
                    console.log(error);
                })
                .finally(function () {
                    // 总是会执行
                });

        },
    })
</script>
</body>
</html>